<!--端口检测-->
<template>
  <div class="h-[100%] box-border w-[100%]">
    <el-card shadow="always">
      <el-form
        size="default"
        inline="true"
        label-width="auto"
        class="translate-y-2"
      >
        <el-form-item label="站点名称：">
          <el-input
            style="width: 240px"
            placeholder="例:kk"
            v-model="dataParams.stationName"
            clearable
          />
        </el-form-item>
        <el-form-item label="挂载点名称：">
          <el-input
            style="width: 240px"
            placeholder="例:kk"
            v-model="dataParams.mountPoint"
            clearable
          />
        </el-form-item>
        <el-form-item label="分组名称：">
          <el-select
            style="width: 200px"
            v-model="dataParams.groupId"
            placeholder="请选择分组"
            clearable
            filterable
            @change="
              (v) => {
                dataParams.groupId = v;
                getNtripStationDataList();
              }
            "
          >
            <el-option
              v-for="item in dataListGroupSelect"
              :label="item.groupName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注：">
          <el-input
            style="width: 240px"
            placeholder="例:kk"
            v-model="dataParams.remark"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            :icon="Refresh"
            type="primary"
            @click="getNtripStationDataList"
            >查询
          </el-button>
          <el-button
            :icon="Sunny"
            type="primary"
            @click="openForwardDialog(true, null)"
            >添加
          </el-button>

          <el-button
            type="primary"
            :icon="CaretRight"
            @click="NtripServerEditDialog"
            >服务配置
          </el-button>
          <el-button v-if="false" type="primary" :icon="Sunny"
            >批量模板下载
          </el-button>
          <el-button v-if="false" type="primary" :icon="Sunny"
            >批量添加
          </el-button>
          <el-button type="primary" :icon="Sunny" @click="openNtripGroupDialog"
            >查看分组
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="main mt-2">
      <el-card class="cardData" style="width: 100%; height: 100%">
        <el-table
          height="65vh"
          :border="true"
          :data="dataList"
          v-loading="tableLoading"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            prop="stationName"
            label="StationName"
            width="150"
          ></el-table-column>
          <el-table-column prop="mountPoint" label="MountPoint" />
          <el-table-column prop="groupName" label="分组" />
          <el-table-column prop="isUnAuth" label="认证方式">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.isUnAuth ? 'warning' : 'success'"
              >
                {{ scope.row.isUnAuth ? "透传" : "密码" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="way" label="使用类型">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.way === 1 ? 'warning' : 'info'"
              >
                {{ scope.row.way === 1 ? "RTK" : "后解算" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="srcConnectSize" label="源站连接数量">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.srcConnectSize == 0 ? 'danger' : 'success'"
              >
                {{ scope.row.srcConnectSize }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="tarConnectSize" label="挂载用户数量">
            <template #default="scope">
              <el-tag
                effect="light"
                style="width: 3vw"
                :type="scope.row.tarConnectSize == 0 ? 'danger' : 'success'"
              >
                {{ scope.row.tarConnectSize }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="dataReceiverSize" label="接收数据量(KB)" />
          <el-table-column prop="dataForwardSize" label="转发数据量(KB)" />
          <el-table-column prop="lat" label="经度" />
          <el-table-column prop="lon" label="纬度" />
          <el-table-column prop="alt" label="高程" />
          <el-table-column prop="satelliteNum" label="卫星数" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column
            prop="connectTime"
            label="基站最新上线时间"
            :formatter="
              (row) => dayjs(row.connectTime).format('YYYY-MM-DD HH:mm:ss')
            "
          />
          <el-table-column
            prop="createdAt"
            label="最新数据转发时间"
            :formatter="
              (row) =>
                dayjs(row.dataForwardNewTime).format('YYYY-MM-DD HH:mm:ss')
            "
          />
          <el-table-column prop="status" label="启用状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#B9B9B9"
                :active-value="true"
                :inactive-value="false"
                @change="startCloseNtripStationForward(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="350">
            <template #default="scope">
              <el-button
                :icon="Edit"
                @click="openForwardDialog(false, scope.row)"
                >编辑
              </el-button>
              <el-button
                :icon="UserFilled"
                @click="openOnlineUserDialog(scope.row)"
                >在线用户
              </el-button>
              <el-button
                :icon="Delete"
                type="danger"
                @click="deleteNtripStation(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="w-[100%] flex justify-end mt-2">
          <el-pagination
            v-model:current-page="dataParams.pageNum"
            v-model:page-size="dataParams.pageSize"
            :page-sizes="[10, 20]"
            :size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal"
            @size-change="
              (number) => {
                getNtripStationDataList();
              }
            "
            @current-change="
              (number) => {
                getNtripStationDataList();
              }
            "
          />
        </div>
      </el-card>
    </div>
  </div>
  <el-dialog
    draggable
    v-model="dialogStatusInfo.ntripDialog"
    :title="dialogStatusInfo.title"
    width="500"
  >
    <el-form inline label-width="100" ref="addForm">
      <el-form-item label="站点名称:" prop="stationName">
        <el-input
          v-model="addDataForward.stationName"
          placeholder="请输入站点名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="挂载点名称" prop="mountPoint">
        <el-input
          v-model.number="addDataForward.mountPoint"
          placeholder="请输入挂载点名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="认证方式:" prop="isUnAuth">
        <el-select
          style="width: 180px"
          v-model="addDataForward.isUnAuth"
          placeholder="请选择认证方式"
        >
          <el-option :label="'密码认证'" :value="false"></el-option>

          <el-option :label="'透传'" :value="true"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分组:" prop="groupId">
        <el-select
          style="width: 200px"
          v-model="addDataForward.groupId"
          placeholder="请选择分组"
          clearable
          filterable
        >
          <el-option
            v-for="item in dataListGroupSelect"
            :label="item.groupName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用类型:" prop="way">
        <el-select
          style="width: 200px"
          v-model="addDataForward.way"
          placeholder="请选择使用类型"
          clearable
          filterable
        >
          <el-option label="RTK" :value="1"></el-option>
          <el-option label="后解算" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input
          v-model="addDataForward.remark"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          :icon="CloseBold"
          @click="dialogStatusInfo.ntripDialog = false"
          >关闭
        </el-button>
        <el-button :icon="Check" type="primary" @click="addNtripStationData">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    draggable
    v-model="userSeeDialog"
    :title="ntripOnlineUserTile"
    @open="openUserDialog"
    @close="closeUserDialog"
    :width="tableUserInfo.dialogWidth"
    style="overflow: auto"
  >
    <el-table-v2
      :columns="onlineUserColumns"
      :data="ntripOnlineUserList"
      :row-height="40"
      :width="tableUserInfo.width"
      :height="tableUserInfo.height"
      :footer-height="50"
    >
      <template #empty>
        <div class="flex items-center justify-center h-100%">
          <el-empty />
        </div>
      </template>
    </el-table-v2>
  </el-dialog>

  <el-dialog v-model="ntripServerConfigDialog" title="配置中心">
    <el-form inline label-width="100">
      <el-form-item label="服务端口:" prop="NtripCasterPort">
        <el-input
          v-model="ntripServerInfo.NtripCasterPort"
          placeholder="请输入服务端口"
        ></el-input>
      </el-form-item>
      <el-form-item label="服务状态" prop="NtripServerStatus">
        <el-switch
          v-model="ntripServerInfo.NtripServerStatus"
          @change="EditNtripServerStatus"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :icon="CloseBold" @click="ntripServerConfigDialog = false"
          >关闭
        </el-button>
        <el-button
          :icon="Check"
          type="primary"
          @click="EditNtripServerPort"
          :disabled="ntripServerInfo.NtripServerStatus"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--    分组弹窗-->
  <el-dialog v-model="ntripGroupDialog" title="分组中心">
    <div>
      <el-form inline label-width="100">
        <el-form-item label="操作选择:">
          <el-select style="width: 120px" v-model="isSelectGroup">
            <el-option label="查询" :value="true"></el-option>
            <el-option label="添加" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isSelectGroup" label="分组查询:" prop="groupName">
          <el-input
            placeholder="请输入分组名称"
            v-model="ntripGroupSelectParams.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item v-if="isSelectGroup">
          <el-button @click="getNtripGroupList" type="primary">搜索 </el-button>
        </el-form-item>

        <el-form-item v-if="!isSelectGroup" label="分组添加:" prop="groupName">
          <el-input
            placeholder="请输入需要添加分组名称"
            v-model="ntripGroupAddOrEdit.groupName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item v-if="!isSelectGroup">
          <el-button @click="addNtripGroup" type="primary">添加 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      height="50vh"
      :border="true"
      :data="ntripGroupList"
      v-loading="tableLoading"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="id" label="ID" width="150"></el-table-column>
      <el-table-column prop="groupName" label="组名">
        <template #default="scope">
          <span v-if="scope.row.flag">{{ scope.row.groupName }}</span>
          <el-input
            @blur="editNtripGroup(scope.row)"
            v-else
            v-model="scope.row.groupName"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350">
        <template #default="scope">
          <el-button
            @click="
              () => {
                scope.row.flag = !scope.row.flag;
              }
            "
            :icon="Edit"
            >编辑
          </el-button>
          <el-button
            :icon="Delete"
            type="danger"
            @click="deleteNtripGroup(scope.row.id)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="ntripGroupSelectParams.pageNum"
        v-model:page-size="ntripGroupSelectParams.pageSize"
        :page-sizes="[10, 20]"
        :size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ntripGroupListTotal"
        @size-change="
          (number) => {
            getNtripGroupList();
          }
        "
        @current-change="
          (number) => {
            getNtripGroupList();
          }
        "
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import { ElMessage, ElLoading } from "element-plus";
import {
  Delete,
  Refresh,
  Sunny,
  CloseBold,
  Check,
  Edit,
  UserFilled,
  CaretRight,
} from "@element-plus/icons-vue";
import type { ComponentSize } from "element-plus";
import {
  AddNtripStationApi,
  DeleteNtripStationApi,
  GetNtripStationApi,
  EditNtripStationApi,
  StartCloseNtripStationApi,
  StartCloseNtripServerApi,
  GetNtripOnlineUserApi,
  GetNtripStatusinfoServerApi,
  EditNtripStatusinfoServerApi,
} from "../../service/port";
import type { NtripStationAddParams } from "../../service/port";
import type { SearchNtripStationParams } from "../../service/port";
import type { StartCloseNtripStationParams } from "../../service/port";
import dayjs from "dayjs";
import {
  addNtripGroupAPI,
  deleteNtripGroupAPI,
  updateNtripGroupAPI,
  getNtripGroupListAPI,
} from "@/api/ntripGroup";
import type { NtripGroupDTO } from "@/api/ntripGroup";
import type { NtripGroupSelectParams } from "@/api/ntripGroup";

/**
 * 公共数据
 */
const tableLoading = ref(false);
const addForm = ref();
//弹窗修改状态信息
const dialogStatusInfo = ref({
  isAdd: true,
  ntripDialog: false,
  title: "",
});
//在线用户弹窗控制量
const userSeeDialog = ref(false);
/**
 * 弹窗打开函数
 */
const openForwardDialog = (flag: boolean, row: any) => {
  if (flag) {
    dialogStatusInfo.value.ntripDialog = true;
    dialogStatusInfo.value.isAdd = true;
    dialogStatusInfo.value.title = "Ntrip站点添加";
    return;
  }
  if (row.status) {
    ElMessage.warning("启用状态禁止编辑");
    return;
  }
  dialogStatusInfo.value.ntripDialog = true;
  dialogStatusInfo.value.isAdd = false;
  dialogStatusInfo.value.title = "Ntrip站点编辑";
  addDataForward.value.remark = row.remark;
  addDataForward.value.id = row.id;
  addDataForward.value.mountPoint = row.mountPoint;
  addDataForward.value.stationName = row.stationName;
  addDataForward.value.isUnAuth = row.isUnAuth;
  addDataForward.value.groupId = row.groupId;
  addDataForward.value.way = row.way;
};

/**
 * 在线用户列表查看弹窗函数
 */
const ntripOnlineUserList = ref([]);
const ntripOnlineUserTile = ref("在线用户");

const openOnlineUserDialog = async (row) => {
  if (!row.status) {
    ElMessage.warning("基站已关闭，请勿操作");
    return;
  }
  userSeeDialog.value = true;

  const res = await GetNtripOnlineUserApi(row.mountPoint);
  if (res.code == 200) {
    ntripOnlineUserList.value = res.data.list;
    ntripOnlineUserTile.value = `在线用户(${res.data.list.length})`;
  } else {
    ElMessage.error("获取异常");
  }
};
const tableUserInfo = ref({
  height: 0,
  width: 0,
  dialogWidth: 0,
});
//dialog打开回调
const openUserDialog = () => {
  updateTableHeight();
  window.addEventListener("resize", updateTableHeight);
};

const updateTableHeight = () => {
  tableUserInfo.value.height = document.body.clientHeight * 0.5;
  tableUserInfo.value.width = document.body.clientWidth * 0.5;
  tableUserInfo.value.dialogWidth = document.body.clientWidth * 0.52;
};

//dialog关闭回调
const closeUserDialog = () => {
  window.removeEventListener("resize", updateTableHeight);
};

//解析定位状态
const ParseGpggaStatus = (status: number): string => {
  if (!status) {
    return "未定位";
  } else if (status == 1) {
    return "单点定位";
  } else if (status == 2) {
    return "伪距差分";
  } else if (status == 3) {
    return "无效解";
  } else if (status == 4) {
    return "RTK固定解";
  } else if (status == 5) {
    return "RTK浮点解";
  } else if (status == 6) {
    return "正在估算";
  } else if (status == 7) {
    return "人工输入固定值";
  } else if (status == 8) {
    return "超宽巷解";
  } else if (status == 9) {
    return "SBAS解";
  } else {
    return "";
  }
};
//在线用户列
const onlineUserColumns = ref([
  {
    key: "ID",
    dataKey: "id",
    title: "ID",
    width: 150,
  },
  {
    key: "Username",
    dataKey: "username",
    title: "用户名",
    width: 150,
  },
  {
    key: "MountPoint",
    dataKey: "mountPoint",
    title: "挂载点",
    width: 150,
  },
  {
    key: "ConnectTime",
    dataKey: "connectTime",
    title: "最新上线时间",
    width: 200,
    cellRenderer: ({ cellData: timeStr }) =>
      dayjs(timeStr).format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    key: "SatelliteNum",
    dataKey: "satelliteNum",
    title: "卫星数",
    width: 150,
  },
  {
    key: "DifferenceTime",
    dataKey: "differenceTime",
    title: "差分延时(s)",
    width: 150,
  },
  {
    key: "DifferenceStatus",
    dataKey: "differenceStatus",
    title: "差分状态",
    width: 150,
    cellRenderer: ({ cellData: differenceStatus }) => {
      return ParseGpggaStatus(differenceStatus);
    },
  },
  {
    key: "Lat",
    dataKey: "lat",
    title: "纬度",
    width: 150,
  },
  {
    key: "Lon",
    dataKey: "lon",
    title: "经度",
    width: 150,
  },
  {
    key: "Alt",
    dataKey: "alt",
    title: "高程",
    width: 150,
  },
]);

/**
 * ntrip站点数据获取*************************
 */
//数据列表
const dataList = ref([]);
const dataTotal = ref(0);
//数据查询参数
const dataParams = ref<SearchNtripStationParams>({
  pageSize: 10,
  pageNum: 1,
});
const getNtripStationDataList = async () => {
  tableLoading.value = true;
  const res = await GetNtripStationApi(dataParams.value);
  if (res.data.list == null) {
    dataList.value = [];
  } else {
    dataList.value = res.data.list.map((v) => {
      v.dataReceiverSize = v.dataReceiverSize.toFixed(3);
      v.dataForwardSize = v.dataForwardSize.toFixed(3);
      return v;
    });
  }

  dataTotal.value = res.data.total;
  tableLoading.value = false;
};
/**
 * ntrip站点记录添加
 */
//记录添加表单数据
const addDataForward = ref<NtripStationAddParams>({
  id: undefined,
  stationName: "",
  mountPoint: "",
  remark: "",
  groupId: 1,
  isUnAuth: false,
  way: 1,
});
const addNtripStationData = async () => {
  if (dialogStatusInfo.value.isAdd) {
    const res = await AddNtripStationApi(addDataForward.value);
    if (res.code == 200) {
      ElMessage.success("新增成功");
      dialogStatusInfo.value.ntripDialog = false;
      getNtripStationDataList();
    } else {
      ElMessage.error(res.data);
    }
  } else {
    console.log("调用编辑按钮");
    const res = await EditNtripStationApi(addDataForward.value);
    if (res.code == 200) {
      ElMessage.success("编辑成功");
      dialogStatusInfo.value.ntripDialog = false;
      getNtripStationDataList();
    } else {
      ElMessage.error(res.data);
    }
  }
};

/**
 * ntrip站点记录删除
 */
const deleteNtripStation = async (row: any) => {
  if (row.status) {
    ElMessage.warning("启用状态禁止删除");
    return;
  }
  const res = await DeleteNtripStationApi(row.id);
  if (res.code == 200) {
    ElMessage.success("删除成功");
  } else {
    ElMessage.error(res.data);
  }
  getNtripStationDataList();
};

/**
 * 开启或者关闭基站转发服务
 */

const startCloseNtripStationForward = async (row) => {
  const params: StartCloseNtripStationParams = {};
  params.mountPoint = row.mountPoint;
  params.flag = row.status;
  const res = await StartCloseNtripStationApi(params);
  if (res.code == 200) {
    ElMessage.success("执行成功");
  } else {
    ElMessage.error(res.data);
  }
  getNtripStationDataList();
};

/**
 * 查看ntrip服务
 */
//服务
const ntripServerConfigDialog = ref(false);
const ntripServerInfo = ref({
  NtripServerStatus: false,
  NtripCasterPort: 5999,
});
const NtripServerEditDialog = async () => {
  ntripServerConfigDialog.value = true;
  const res = await GetNtripStatusinfoServerApi();
  if (res.code == 200) {
    ntripServerInfo.value = res.data;
  } else {
    ElMessage.error("查询异常");
  }
};
/**
 * 修改ntrip服务状态
 */
const EditNtripServerStatus = async () => {
  //判断如果有基站在工作
  let flag = false;
  dataList.value.forEach((v) => {
    if (v.status) {
      flag = true;
    }
  });
  if (flag && !ntripServerInfo.value.NtripServerStatus) {
    ElMessage.warning("有基站在工作禁止关闭");
    ntripServerInfo.value.NtripServerStatus = true;
    return;
  }
  const res = await StartCloseNtripServerApi(
    ntripServerInfo.value.NtripCasterPort,
    ntripServerInfo.value.NtripServerStatus
  );
  if (res.code == 200) {
    ElMessage.success("执行成功");
  } else {
    ElMessage.error("关闭异常");
  }
};

/**
 * 修改ntrip服务端口
 */

const EditNtripServerPort = async () => {
  //校验端口合法
  if (
    ntripServerInfo.value.NtripCasterPort <= 0 ||
    ntripServerInfo.value.NtripCasterPort > 65535
  ) {
    ElMessage.warning("端口不合法");
    return;
  }
  const res = await EditNtripStatusinfoServerApi(
    ntripServerInfo.value.NtripCasterPort.toString()
  );
  if (res.code == 200) {
    ElMessage.success("修改成功");
  } else {
    ElMessage.error("修改失败");
  }
};

/**
 *  周期钩子函数********************************
 */

onMounted(async () => {
  await getNtripStationDataList();
  await dataListGroupSelectFn();
});

/**
 * ntrip分组
 */
const isSelectGroup = ref(true);
const ntripGroupDialog = ref(false);
const ntripGroupList = ref([]);
const ntripGroupSelectParams = ref<NtripGroupSelectParams>({
  pageSize: 10,
  pageNum: 1,
  name: "",
});
const ntripGroupListTotal = ref(0);
const ntripGroupAddOrEdit = ref<NtripGroupDTO>({
  groupName: "",
});
const getNtripGroupList = async () => {
  const res = await getNtripGroupListAPI(ntripGroupSelectParams.value);
  if (res.code == 200) {
    ntripGroupList.value = res.data.list === null ? [] : res.data.list;
    ntripGroupList.value.map((item) => {
      item["flag"] = true;
    });
    ntripGroupListTotal.value = res.data.total;
  } else {
    ElMessage.error("查询分组异常");
  }
};
//添加ntrip分组
const addNtripGroup = async () => {
  if (!ntripGroupAddOrEdit.value.groupName) {
    ElMessage.warning("分组名称不能为空");
    return;
  }
  const res = await addNtripGroupAPI(ntripGroupAddOrEdit.value);
  if (res.code == 200) {
    ElMessage.success("添加成功");
    getNtripGroupList();
    dataListGroupSelectFn();
  } else {
    ElMessage.error("添加失败");
  }
};
/**
 * 删除分组
 */
const deleteNtripGroup = async (id: number) => {
  const res = await deleteNtripGroupAPI(id);
  if (res.code == 200) {
    ElMessage.success("删除成功");
    getNtripGroupList();
  } else {
    ElMessage.error(res.data);
  }
};

/**
 * 编辑分组
 */
const editNtripGroup = async (row: any) => {
  row.flag = !row.flag;
  console.log("编辑分组", row);
  const res = await updateNtripGroupAPI({
    id: row.id,
    groupName: row.groupName,
  });
  if (res.code == 200) {
    ElMessage.success("修改成功");
    getNtripGroupList();
  } else {
    ElMessage.error(res.data);
  }
};
const openNtripGroupDialog = async () => {
  await getNtripGroupList();
  ntripGroupDialog.value = true;
};

/**
 * 分组筛选或者查询
 */
const dataListGroupSelect = ref([]);
const dataListGroupSelectFn = async () => {
  const res = await getNtripGroupListAPI({
    pageSize: 10000,
    pageNum: 1,
  });
  if (res.code == 200) {
    dataListGroupSelect.value = res.data.list === null ? [] : res.data.list;
  } else {
    ElMessage.error("查询分组异常");
  }
};
</script>

<style scoped>
.container {
  box-sizing: border-box;
  height: 100%;
}

::v-deep(.el-table .success) {
  background-color: #e9ffdb;
}

::v-deep(.el-table .fail) {
  background-color: #ffc87c;
}

[type="file"] {
  color: red;
  /* font-size: 0; */
}

/* 主按钮的样式自定义 */
::file-selector-button {
  height: 2.5rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

::-ms-browse {
  height: 3rem;
  color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #2a80eb;
  padding: 0.75rem 1rem;
  background-color: #2a80eb;
  cursor: pointer;
}

.page {
  position: absolute;
  bottom: 10px;
  left: 400px;
}

/*
  .cardData {
    position: relative;
    height: 95%;
  } */

.card {
  /* width: 80vw; */
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.card2 {
  height: 80px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.isActive {
  background-color: red;
  color: bisque;
}

.header {
  /* background-color: rgb(240, 240, 240); */
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 10%;
}

.main {
  display: flex;
  height: 90%;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
